{% extends 'public/header.html' %}
{% block content %}
{% include 'public/sub-header.html' %}
<script type="text/javascript" src="/js/axios.min.js"></script>
<script type="text/javascript" src="plugins/ueditor-plus/ueditor.config.js"></script>
<script type="text/javascript" src="plugins/ueditor-plus/ueditor.all.js"></script>
<script type="text/javascript" src="plugins/ueditor-plus/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/js/article-info.js"></script>
<link rel="stylesheet" href="/css/article-info.css">
  <div class="article-main">
    <div class="article-container">
      <div class="article-path">
        <span>
          首页 > 手记 > {{article_content.title}}
        </span>
      </div>
    </div>
    <div class="article-container-main clearfix">
      <div class="left fl">
        <div class="article-title">
          <span>{{article_content.title}}</span>
        </div>
        <div class="note-article-info clearfix">
          <div class="note-left fl">
            <span class="tag-name">标签：</span>
            {% for article_tag in article_tag_list %}
            <span class="tag-value">{{article_tag}}</span>
            {% endfor %}
          </div>
          {% if is_favorite == 1 %}
          <div class="note-right fr" onclick="favoriteUpdate({{article_content.id}}, 0)">收藏</div>
          {% else %}
          <div class="note-right fr" onclick="favoriteUpdate({{article_content.id}}, 1)">已收藏</div>
          {% endif %}
        </div>
        <div class="article-content-wrap">
          {{article_content.article_content | safe}}
        </div>
        <div class="article-create-time">发表于 {{article_content.create_time}}， 共 {{article_content.browse_num}} 人浏览</div>
        <div class="imooc">本文原创发布于慕课网 ，转载请注明出处，谢谢合作</div>
        <div class="praise">
            <span class="iconfont">&#xe61b;</span>
        </div>
      </div>
      <div class="right fl">
        <div class="top clearfix">
          <div class="author-image fl">
            <img src="{{user_info.picture}}" alt="">
          </div>
          <div class="author-info fl">
            <div class="author-name">{{user_info.nickname}}</div>
            <div class="author-job">{{user_info.job}}</div>
          </div>
        </div>
        <div class="bottom">
          <div class="about-article">相关文章推荐</div>
          <div class="about-article-info">
            {% for article in about_article %}
            <div class="article-info-row">
              <a href="/detail?article_id={{article.id}}" class="iconfont">&#xe895;&nbsp;&nbsp;{{article.title}}</a>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

    <div class="feedback-num">{{feedback_count}} 评论</div>
    <div class="article-feedback clearfix">
      <div class="feedback-wrap fl">
        <div class="write-feedback-wrap clearfix">
          <div class="fl">评论</div>
          <span class="fl" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#feedbackModal">
            共同学习，写下你的评论
          </span>
        </div>
        {% if feedback_data_list == [] %}
        <div class="no-data">
          <div class="no-data-line">
            <span>暂无评论</span>
          </div>
        </div>
        {% else %}
        <div class="feedback-list-wrap">
          {% for feedback in feedback_data_list %}
          <div class="feedback-detail-wrap">
            <div class="feedback-detail clearfix">
              <div class="feedback fl">
                <div class="feedback-author">
                  <a href="">
                    <img src="{{feedback.picture}}" alt="">
                    <span>{{feedback.floor_number}}楼</span>
                  </a>
                </div>
              </div>
              <div class="feedback-content fl">
                <a href="">{{feedback.nickname}}</a>
                <span>{{feedback.content | safe}}</span>
                <div class="feedback-content-footer clearfix">
                  <span class="iconfont fl">&#xe61b;</span>
                  <div class="reply-button fl"
                       onclick="showWriteAuthorInput({{feedback.id}}, {{feedback.article_id}}, {{feedback.user_id}}, '{{feedback.nickname}}', {{feedback.id}})">
                    回复
                  </div>
                  <div class="publish-time fr">{{feedback.create_time}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="reply-box">
            {% for reply in feedback.reply_list %}
            <div class="feedback-reply-detail clearfix">
              <div class="feedback-reply fl">
                <div class="feedback-author">
                  <a href="">
                    <img src="{{reply.from_user.picture}}" alt="">
                  </a>
                </div>
              </div>
              <div class="feedback-reply-content fl">
                <a href="">{{reply.from_user.nickname}}</a>
                <span class="reply-text">回复</span>
                <a href="">{{reply.to_user.nickname}}</a>
                <p>{{reply.content.content|safe}}</p>
                <div class="feedback-reply-content-footer clearfix">
                  <div class="reply2-button fl"
                       onclick="showWriteAuthorInput({{feedback.id}}, {{feedback.article_id}}, {{reply.from_user.user_id}}, '{{reply.from_user.nickname}}', {{reply.content.id}})">
                    回复
                  </div>
                  <div class="publish-time fr">{{reply.content.create_time}}</div>
                </div>
              </div>
            </div>
            {% endfor %}
            <div class="write-author-feedback" style="display: none;" id="{{feedback.id}}">
              <img src="{{session.get('picture')}}" alt="">
              <textarea type="text" placeholder="写下你的评论..."></textarea>
              <div class="author-feedback-button">
                <button class="cancel-author-feedback" onclick="hiddenWriteAuthorInput({{feedback.id}})">取消</button>
                <button class="confirm-author-feedback" onclick="writeReply()">回复</button>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      <div class="useless-right fl"></div>
    </div>
  </div>

  <div class="feedback-modal-wrap">
    <div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="feedbackModalLabel">发评论</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="feedback-container"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" onclick="addFeedback({{article_content.id}})">提交</button>
          </div>
        </div>
      </div>
    </div>

  </div>

{% endblock %}
